<template>
	<view class="new-users">
		<view class="head">
			<view class="user-info">
				<image class="avatar morenGoodsBG" :src="avatar"></image>
				<view class="info">
					<view class="name">{{merName}}</view>
				</view>
			</view>
			<view class="accountMoney">
				<!-- 可用余额 -->
				<view>
					<view class="item-title">{{$t("mine.availableBalance")}}({{$t("publicLang.yuan")}})</view>
					<view class="item-money">{{tableData.account}}</view>
				</view>
<!-- 				<view class="finance-button">
					<view class="button" @click="financeClick(0)">提现</view>
					<view class="button recharge" @click="financeClick(1)">充值</view>
				</view> -->
			</view>
			<view class="moneylist">
				<!-- 可提现金额 -->
				<view class="item">
					<view class="item-title">{{$t("mine.withdrawableAmount")}}({{$t("publicLang.yuan")}})</view>
					<view class="item-money">{{tableData.withdrawAccount}}</view>
				</view>
				<!-- 已提现金额 -->
				<view class="item">
					<view class="item-title">{{$t("mine.amountWithdrawn")}}({{$t("publicLang.yuan")}})</view>
					<view class="item-money">{{tableData.closeMoney}}</view>
				</view>
				<!-- 冻结金额 -->
				<view class="item">
					<view class="item-title">{{$t("mine.freezeAmount")}}({{$t("publicLang.yuan")}})</view>
					<view class="item-money">{{tableData.freezeAccount}}</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="order-item">
				<view class="order-row" @click="orderPageJump(0,2)">
					<!-- 云仓订单 -->
					<view class="title">{{$t("home.cloudWarehouseOrder")}}</view>
					<text class="iconfont iconarrow-right1"></text>
				</view>
				<view class="order-bd">
					<block v-for="(item,index) in yuncangOrderMenu" :key="index">
						<view class="order-item" @click="orderPageJump(0,2,index)">
							<view class="pic">
								<text :class="'iconfont ' + item.iconfont"></text>
								<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
							</view>
							<view class="txt">{{item.title}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="order-item">
				<view class="order-row" @click="orderPageJump(0,1)">
					<!-- 自建订单 -->
					<view class="title">{{$t("home.selfCreatedOrder")}}</view>
					<text class="iconfont iconarrow-right1"></text>
				</view>
				<view class="order-bd">
					<block v-for="(item,index) in buildOrderMenu" :key="index">
						<view class="order-item" @click="orderPageJump(0,1,index)">
							<view class="pic">
								<text class="orderNum">{{item.orderNum}}</text>
								<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
							</view>
							<view class="txt">{{item.title}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="order-item">
				<view class="order-row">
					<!-- 商家运营 -->
					<view class="title">{{$t("mine.businessOperation")}}</view>
					<!-- <text class="iconfont iconarrow-right1"></text> -->
				</view>
				<view class="order-bd">
					<block v-for="(item,index) in operationMenu" :key="index">
						<view class="order-item" @click="operationPageJump(item,index)">
							<view class="pic">
								<text :class="'iconfont ' + item.iconfont"></text>
							</view>
							<view class="txt">{{item.title}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<navigator url="../language_list/index">
			<view class="customer">
				<!-- 切换语言 -->
				<view class="left">{{$t("publicLang.languageSwitch")}}</view>
				<view class="iconfont iconarrow-right1"></view>
			</view>
		</navigator>
		<view class="customer" @click="outLogin">
			<!-- 退出登录 -->
			<view class="left">{{$t("mine.signOut")}}</view>
			<view class="iconfont iconarrow-right1"></view>
		</view>
		<u-popup v-model="show" mode="center" :closeable='true' :mask-close-able="false">
			<view style="padding: 60rpx;text-align: center;">
				<image style="width: 400rpx;height: 400rpx;" show-menu-by-longpress :src="customerServiceQRCode">
				</image>
				<!-- 平台客服二维码 -->
				<view style="text-align: center;font-size: 32rpx;margin-top: 20rpx;">{{$t("mine.platformCustomerServiceQRCode")}}</view> 
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		channelMerAccountCenter
	} from '@/api/user.js';
	import {
		orderListApi,
	} from '@/api/order.js';
	import {
		getPaymentAccountApi
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters(['merName', 'avatar']),
			yuncangOrderMenu(){
				return [{
						iconfont: 'icondaifukuan',
						title: this.$t('publicLang.confirming'),  // 确认中
						url: '/pages/order_list/index?status=2',
						num: 0
					},
					{
						iconfont: 'icondaifahuo',
						title: this.$t('publicLang.toBeDelivered'), // 待发货
						url: '/pages/order_list/index?status=3',
						num: 0
					},
					{
						iconfont: 'icondaishouhuo',
						title: this.$t('publicLang.pendingReceipt'), // 待收货
						url: '/pages/order_list/index?status=4',
						num: 0
					},
					{
						iconfont: 'iconshouhou',
						title: this.$t('publicLang.afterSales'), // 售后
						url: '/pages/order_list/index?status=6',
						num: 0
					}]
			},
			buildOrderMenu(){
				return [{
						orderNum: 1,
						title: this.$t('publicLang.pendingPayment'), // 待付款
						url: '/pages/order_list/index?status=1',
						num: 0
					},
					{
						orderNum: 3,
						title: this.$t('publicLang.toBeDelivered'), // 待发货
						url: '/pages/order_list/index?status=3',
						num: 0
					},
					{
						orderNum: 5,
						title: this.$t('publicLang.pendingReceipt'), // 待收货
						url: '/pages/order_list/index?status=4',
						num: 0
					},
					{
						orderNum: 0,
						title: this.$t('publicLang.afterSales'), // 售后
						url: '/pages/order_list/index?status=6',
						num: 0
					}]
			},
			operationMenu(){
				return [{
						iconfont: 'iconzhuanqu',
						title: this.$t('mine.zone'), // 专区
						url: '/pages/businessOperation/special_area/index'
					},
					{
						iconfont: 'iconpinpai',
						title: this.$t('mine.merchantBrand'), // 商户品牌
						url: '/pages/businessOperation/merchant_brand/index'
					},
					{
						iconfont: 'iconfenlei',
						title: this.$t('mine.merchantCategory'), // 商户分类
						url: '/pages/businessOperation/merchant_classify/index'
					},
					{
						iconfont: 'iconshezhi',
						title: this.$t('mine.merchantSettings'), // 商户设置
						url: '/pages/businessOperation/merchant_set/index'
					},
					{
						iconfont: 'iconkefu',
						title: this.$t('mine.customerService'), // 客服
						url: ''
					}]
			}
		},
		data() {
			return {
				listQuery: {
					page: 1,
					limit: 1,
					type: "1",
				},
				tableData: {},
				show: false,
				customerServiceQRCode: '',
				tableFrom: {
					status: "all",
					dateLimit: "",
					orderId: "",
					page: 1,
					limit: 1,
					shippingType: "",
					orderType: 1
				},
				yuncangTableFrom: {
					status: "all",
					dateLimit: "",
					orderId: "",
					page: 1,
					limit: 1,
					shippingType: "",
					orderType: 2
				},
			}
		},
		onLoad() {
			this.getAccountInfo()
			this.getPaymentAccount()
			this.getOrderCount()
			this.getyuncangOrderCount()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.mine')
			});
		},
		methods: {
			getAccountInfo() {
				var _this = this
				channelMerAccountCenter(this.listQuery).then(res => {
					_this.tableData = res.data
				}).catch((e) => {
					console.info(e)
				});
			},
			getPaymentAccount() {
				var _this = this
				getPaymentAccountApi().then(res => {
					_this.customerServiceQRCode = res.data.customerServiceQRCode
				}).catch((e) => {
					console.info(e)
				});
			},
			getyuncangOrderCount() {
				var _this = this
				orderListApi(this.yuncangTableFrom).then((res) => {
					console.info(res.data.status, "111")
					let status = res.data.status
					_this.yuncangOrderMenu[0].num = status.confirm
					_this.yuncangOrderMenu[1].num = status.notShipped
					_this.yuncangOrderMenu[2].num = status.spike
					// _this.yuncangOrderMenu[3].num = Number(status.refundedPart) + Number(status.refunding) + Number(status.refunded)
					_this.yuncangOrderMenu[3].num = Number(status.refunding) + Number(status.refunded)
					_this.$forceUpdate()
				})
			},
			getOrderCount() {
				var _this = this
				orderListApi(this.tableFrom).then(res => {
					console.info(res.data.status, "123")
					let status = res.data.status
					_this.buildOrderMenu[0].orderNum = status.unPaid
					_this.buildOrderMenu[1].orderNum = status.notShipped
					_this.buildOrderMenu[2].orderNum = status.spike
					// _this.buildOrderMenu[3].orderNum = Number(status.refundedPart) + Number(status.refunding) + Number(status.refunded)
					_this.buildOrderMenu[3].orderNum = Number(status.refunding) + Number(status.refunded)
					_this.$forceUpdate()
				}).catch((e) => {
					console.info(e)
				});
			},
			// 订单跳转
			orderPageJump(e, type, tabIndex) {
				let title, current = ''
				let isAfterSale = false
				if (type == 1) {
					isAfterSale = false
					title = "自建订单"
					if (tabIndex == 0) {
						current = 1
					} else if (tabIndex == 1) {
						current = 3
					} else if (tabIndex == 2) {
						current = 4
					}
				}
				if (type == 2) {
					isAfterSale = false
					title = "云仓订单"
					if (tabIndex == 0) {
						current = 2
					} else if (tabIndex == 1) {
						current = 3
					} else if (tabIndex == 2) {
						current = 4
					}
				}
				if (type == 1 && tabIndex == 3) {
					type = 1
					isAfterSale = true
				}
				if (type == 2 && tabIndex == 3) {
					type = 2
					isAfterSale = true
				}
				uni.navigateTo({
					url: `../order_list/index?type=${type}&title=${title}&current=${current}&isAfterSale=${isAfterSale}`
				})
			},
			operationPageJump(item, index) {
				if (index == 4) {
					this.show = true
					return
				}
				uni.navigateTo({
					url: `${item.url}`
				})
			},
			outLogin() {
				this.$store.commit("LOGOUT");
				uni.reLaunch({
					url: "../login/login"
				})
			},
			financeClick(type, ) {
				// type 0 是提现，1是充值
				let _this = this
				uni.navigateTo({
					url: type ? 'recharge/index' :
						`takeCash/index?withdrawAccount=${this.tableData.withdrawAccount}`,
					events: {
						someEvent: function(data) {
							_this.getAccountInfo()
						}
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.new-users {
		.head {
			padding: 30rpx 40rpx;
			background: #FFFFFF;

			.user-info {
				display: flex;
				align-items: center;

				.avatar {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}

				.info {
					margin-left: 30rpx;

					.name {
						max-width: 480rpx;
						color: rgba(34, 34, 34, 1);
						font-size: 40rpx;
						font-weight: 500;
						color: #222222;
					}
				}
			}

			.accountMoney {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px 0px;

				.item-money {
					font-size: 34rpx;
					font-weight: bold;
					margin-top: 10rpx;
					color: #14151A;
				}

				.item-title {
					text-align: center;
					color: #7E7B7B;
				}

				.finance-button {
					display: flex;

					.button {
						width: 109rpx;
						height: 64rpx;
						text-align: center;
						line-height: 64rpx;
						font-size: 22rpx;
						border-radius: 8rpx;
					}

					.button~.button {
						margin-left: 10rpx;
					}

					.recharge {
						background-color: #000000;
						color: #FFFFFF;
					}
				}
			}

			.moneylist {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					width: 33%;
					.item-money {
						text-align: center;
						font-size: 30rpx;
						font-weight: bold;
						margin-top: 10rpx;
						color: #14151A;
					}

					.item-title {
						text-align: center;
						color: #7E7B7B;
					}
				}
			}
		}

		.order {
			margin-top: 20rpx;
			background: #FFFFFF;

			.order-row {
				display: flex;
				justify-content: space-between;
				padding: 28rpx 40rpx 20rpx 50rpx;
			}

			.order-bd {
				display: flex;
				background-color: #FFFFFF;

				.order-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 25%;
					height: 170rpx;

					.pic {
						position: relative;
						text-align: center;

						.iconfont {
							font-size: 56rpx;
						}

						.orderNum {
							font-size: 36rpx;
							font-weight: bold;
						}
					}

					.txt {
						text-align: center;
						margin-top: 10rpx;
						font-size: 22rpx;
						color: #454545;
						font-weight: 500;
					}

					.order-status-num {
						min-width: 12rpx;
						background-color: #fff;
						color: #af8a40;
						border-radius: 15px;
						position: absolute;
						right: -14rpx;
						top: -15rpx;
						font-size: 20rpx;
						padding: 0 8rpx;
						border: 1px solid #af8a40;
					}
				}
			}
		}

		.customer {
			margin: 20rpx 0;
			background: #FFFFFF;
			display: flex;
			padding: 28rpx 40rpx 20rpx 50rpx;
			justify-content: space-between;
			align-items: center;
		}

		// .customer~.customer{
		// 	border-top: 1rpx solid #EEEEEE;
		// 	margin-top: 0
		// }
	}
</style>
